<template>
<div>
  <!-- 学生信息表 -->
  <el-table v-loading="loadShow" :data="tableData" style="width: 100%">
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="详情介绍:">
            <span>{{ props.row.lecDetail }}</span>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
    <el-table-column label="编号" prop="lecId">
    </el-table-column>
    <el-table-column sortable label="标题" prop="lecName">
    </el-table-column>
    <el-table-column sortable label="时长(H)" prop="lecHour" width="100">
    </el-table-column>
    <el-table-column fixed="right" label="操作" width="100">
      <template slot-scope="scope">
        <el-button type="text"  @click="handleClick(scope.$index,scope.row),DialogVisible = true" size="small">票目发放</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-dialog title="票目发放" width="36%" :visible.sync="DialogVisible">
      <el-form  :model="regForm" status-icon :rules="regRules" ref="regForm">
      <el-form-item prop="tickNum">
        <el-input  type="number" placeholder="票目" size="large" v-model="regForm.tickNum" > </el-input>
      </el-form-item>
      <el-form-item prop="tickAddress">
        <el-input type="text"  placeholder="地址" :maxlength="20" size="large" v-model="regForm.tickAddress" > </el-input>
      </el-form-item>
      <el-form-item prop="tickDate">
        <el-date-picker style="width:100%;" v-model="regForm.tickDate" type="datetime" format="yyyy-MM-dd HH:mm" placeholder="选择日期时间"></el-date-picker>
      </el-form-item>
      <el-form-item style="width:100%;" class="login-btn">
        <el-button type="primary" size="large" style="width:100%" @click.native.prevent="regSubmit" :loading="logining">{{regText}}</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

    <div class="pager">
      <el-pagination layout="prev, pager, next" :total=totalCount @current-change="handleCurrentChange">
      </el-pagination>      
    </div>

  </div>
</template>


<script>
  export default {
    data() {
      var validateUserName = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入！'))
        } else {
          callback();
        }
      }
      return {
        DialogVisible: false,
        logining: false,
        loadShow: true,
        regText: '添加',
        regForm:{
          tickAddress:'',
          tickDate:'',
          tickNum:'',
          lecture:{}
        },
        regRules:{
          tickDate: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
          tickAddress: [
            { required: true, validator: validateUserName, trigger: 'blur' }
          ],
          tickNum: [
            { required: true, validator: validateUserName, trigger: 'blur' },
            { min: 1, max: 3, message: "0< >3", trigger: 'blur' }
          ]
        },
        tableData: [],
        page: 1,
        currentPage: 1,
        totalCount: 0
      }
    },
    created(){
      this.getData(this.page)
      setTimeout(() => {
        this.loadShow = false
      },600)
    },
    methods: {
      getData(page){
        var _this = this
        this.$ajax.get('/api/getLectures?id=0&page=' + (page-1)).then(function(response){
          _this.tableData = response.data.data.content
          _this.totalCount = response.data.data.totalElements
        }).catch(function(error){console.log(error);}); 
      },
      handleCurrentChange(val) {
        this.getData(val)
      },
      regSubmit(){
        var _this = this;
        this.$refs.regForm.validate((valid) => {
          if (valid) {
            _this.logining = true;
            _this.regText = "Wait...";
            this.$ajax.post('/api/addTicket',
              _this.regForm
              ).then(function(response){
                  if(0==response.data.code){
                    _this.regText = "添加...";
                    setTimeout(function () {
                      _this.logining = false;
                      _this.$message({message: response.data.data,type: 'success'});
                      _this.$refs['regForm'].resetFields();
                      _this.getData(_this.page)
                    }, 1200);
                  }else if(1==response.data.code){
                    _this.$message({message: response.data.msg,type: 'error'});
                  }
                  setTimeout(() => {
                    _this.logining = false;
                    _this.regText = "添加";
                    _this.DialogVisible = false
                   }, 900);
              }).catch(function(error){console.log(error);}); 
          } else {
            return false;
          }
        })
      },
      handleClick(index,row) {
        this.regForm.lecture = row
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>



<style scoped>
.pager{margin-top:35px;text-align:center;}
</style>